<template>
  <div class="app">
<!-- 搜索框 -->
<van-search
  v-model="value"
  show-action
  label="地址"
  placeholder="请输入搜索关键词"
  background="transparent"
>
  <template #action >
<van-icon size="20" name="location" @click="$router.push('/map')"/>
  </template>
</van-search>
<!-- 轮播图 -->
<van-swipe :autoplay="3000">
  <van-swipe-item v-for="item in getRotation" :key="item.id">
    <img width="100%" v-lazy="'http://liufusong.top:8080'+item.imgSrc" />
  </van-swipe-item>
</van-swipe>
<!-- 小按钮 -->
<van-grid :border="false">
  <van-grid-item @click="$router.push('/layout/search')" >
    <div class="lusetubiao">
      <van-icon size="40" name="wap-home-o" />
    </div>
    <p>整租</p>
  </van-grid-item>
    <van-grid-item  @click="$router.push('/layout/search')">
    <div class="lusetubiao">
      <van-icon size="40" name="friends-o" />
    </div>
    <p>合租</p>
  </van-grid-item>
    <van-grid-item @click="$router.push('/map')" >
    <div class="lusetubiao">
      <van-icon size="40" name="guide-o" />
    </div>
    <p>地图找房</p>
  </van-grid-item>
    <van-grid-item >
    <div class="lusetubiao" >
      <van-icon size="40" name="after-sale" />
    </div>
    <p>去出租</p>
  </van-grid-item>

</van-grid>
<!-- 更多 -->
<van-cell-group >
  <van-cell  class="zufang" title="租房小组" value="更多"/>
<van-grid class="zufang"  :gutter="10" direction="horizontal" :column-num="2" >
  <van-grid-item v-for="item1 in getRoom" :key="item1.id">
    <img width="50px" height="50px"  class="tp" v-lazy="'http://liufusong.top:8080'+item1.imgSrc" >
    <p>
      <span>{{item1.desc}}</span><br>
      <span>{{item1.title}}</span>
    </p>
  </van-grid-item>
</van-grid>
</van-cell-group>
  </div>
</template>

<script>
import { Rotation, Room } from '@/api/resommend.js'
export default {
  name: 'Home',
  data () {
    return {
      value: '',
      getRotation: [],
      getRoom: []
    }
  },

  created () {
    this.onSubmit()
    this.RentAHouse()
  },

  methods: {
    async  onSubmit () {
      try {
        const res = await Rotation()
        this.getRotation = res.data.body
      } catch (err) {
        console.log('出错了')
      }
    },
    async  RentAHouse () {
      try {
        const res = await Room()
        this.getRoom = res.data.body
      } catch (err) {
        console.log('出错了')
      }
    }
  }
}

</script>

<style scoped lang='less'>
.app {
  padding-bottom: 50px;
  .van-search {
    width: 100%;
    position:absolute;
    z-index: 1;

  }
  .lusetubiao {
    width:60px;
    height:60px;
    border-radius: 50%;
    background-color:yellowgreen;
    margin-bottom: 6px;
    .van-icon{
      margin: 10px;
    }
  }
  .zufang {
    background-color: #f6f5f6;
    padding-bottom: 10px;
    .tp{
      margin-right: 10px;
    }
  }
}
</style>
